<%--
  Created by IntelliJ IDEA.
  User: pipi
  Date: 2018/4/22
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar组件</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/build/css/doc.css" media="all">
</head>

<body>
<div class="kit-doc">

    <div class="layui-form-item">
        <label class="layui-form-label">报价人</label>
        <div class="layui-input-inline">
            <input type="text" id="productNO" name="productNO" required  lay-verify="required" placeholder="请输入报价编号"
                   autocomplete="off" class="layui-input">
        </div>
        <a id="search" class="layui-btn layui-btn-small">搜索</a>
        <a id="add" class="layui-btn layui-btn-small" href="/quotation/add">新增</a>
    </div>

    <table class="layui-table" id="test" lay-filter="operation">

    </table>
</div>
<script src="/plugins/layui/layui.js"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>


<script>
    var util;
    // 使用table 和jquery两个模块,util做时间转化用
    layui.use(['table','jquery','util'], function(){
        var table = layui.table;
        var $ = layui.$ //重点处,使用layui内置的jquery
        util=layui.util;
        var tableIns = table.render({
            elem: '#test'
            ,url:'/quotation/listdata'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,page: true
            ,cols: [[
                {field:'quotationNO',  title: '报价编号'}
                // ,{field:'customer', title: '客户名', templet: '<div>{{d.customer.customerName}}</div>'}
                // ,{field:'product', title: '产品名', templet: '<div>{{d.product.productName}}</div>'}
                ,{field:'orderNO', title: '询价编号', }
                ,{field:'quotationMan', title: '报价人', }
                ,{field:'quotationTime', title: '报价时间', sort: true,templet: '#timeTpl'}
                ,{field:'otherInfo', title: '其他信息', }
                ,{title: '操作',fixed: 'right',  align:'center', toolbar: '#barDemo'}
            ]]
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                // console.log(res);
                // //得到当前页码
                // console.log(curr);
                // //得到数据总量
                // console.log(count);
            }
        });

        //监听工具条,删除修改等按钮
        table.on('tool(operation)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){ //查看
                //do somehing

            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type : "POST",  //提交方式
                        url : "/quotation/delete",//路径
                        data : {
                            "quoNO" : data.quotationNO
                        },//数据，这里使用的是Json格式进行传输
                        dataType:"json", //返回类型为json
                        success : function(result) {//返回数据根据结果进行相应的处理
                            if ( result.status == "true" ) {
                                layer.msg(result.msg);
                            } else {
                                layer.msg(result.msg);
                            }
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                location.href='/quotation/update?quotationNO='+data.quotationNO;
                // //同步更新缓存对应的值
                // obj.update({
                //     username: '123'
                //     ,title: 'xxx'
                // });
            }
        });


        //这里搜索需要重绘表格
        $("#search").click(function () {
            var searchData= {
                "productNO":$("#productNO").val()
            };
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    productNO: $("#productNO").val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });


</script>
<%--对应的模板timeTpl--%>
<script type="text/html" id="timeTpl">
    {{ util.toDateString(d.quotationTime,'yyyy-MM-dd HH:mm:ss')}}
</script>
<script type="text/html" id="customerTpl">
    {{d.customer.customerName}}
</script>
<script type="text/html" id="productTpl">
    {{d.product.productName}}
</script>
</body>

</html>
